<template>
  <div class="user-info">
    <div class="left">
      <div class="img-container">
        <img
          class="logo"
          v-logo-error
          :src="profile?.headimgurl"
          alt=""
          v-if="profile?.headimgurl"
        />
        <img
          class="logo"
          src="~/assets/images/user-logo/default_logo.jpg"
          alt=""
          v-else
        />
        <button @click="uploadAvatar">{{ $t("btnText.change_edit") }}</button>
      </div>
      <div class="details">
        <div class="nickname">
          <span v-if="!profile?.last_name">
            {{ $t("tag.not_set") }}
          </span>
          <span v-else>{{ profile?.last_name + ' ' + profile?.first_name }}</span>
          <span @click="onClickEditNickname">
            <svg
              t="1734968584927"
              class="yindu-icon"
              viewBox="0 0 1028 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="10016"
              width="16"
              height="16"
            >
              <path
                fill="#323232"
                d="M1018.319924 112.117535q4.093748 9.210934 6.652341 21.492179t2.558593 25.585928-5.117186 26.609365-16.374994 25.585928q-12.281245 12.281245-22.003898 21.492179t-16.886712 16.374994q-8.187497 8.187497-15.351557 14.32812l-191.382739-191.382739q12.281245-11.257808 29.167958-27.121083t28.144521-25.074209q14.32812-11.257808 29.679676-15.863275t30.191395-4.093748 28.656239 4.605467 24.050772 9.210934q21.492179 11.257808 47.589826 39.402329t40.425766 58.847634zM221.062416 611.554845q6.140623-6.140623 28.656239-29.167958t56.289041-56.80076l74.710909-74.710909 82.898406-82.898406 220.038979-220.038979 191.382739 192.406177-220.038979 220.038979-81.874969 82.898406q-40.937484 39.914047-73.687472 73.175753t-54.242167 54.753885-25.585928 24.562491q-10.234371 9.210934-23.539054 19.445305t-27.632802 16.374994q-14.32812 7.16406-41.960921 17.398431t-57.824197 19.957024-57.312478 16.886712-40.425766 9.210934q-27.632802 3.070311-36.843736-8.187497t-5.117186-37.867173q2.046874-14.32812 9.722653-41.449203t16.374994-56.289041 16.886712-53.730448 13.304682-33.773425q6.140623-14.32812 13.816401-26.097646t22.003898-26.097646z"
                p-id="10017"
              ></path>
            </svg>
          </span>
        </div>
        <div class="infos">
          <template
            v-if="profile?.sex && globalStore.sexTools.getSexById(profile?.sex)"
          >
            <span>{{ globalStore.sexTools.getSexById(profile?.sex) }}</span>
            <span
              class="split"
              v-if="
                profile?.birthday ||
                (profile?.country_id &&
                  countryStore.getCountryById(profile?.country_id))
              "
              >|</span
            >
          </template>
          <template
            v-if="
              profile?.country_id &&
              countryStore.getCountryById(profile?.country_id)
            "
          >
            <span>{{ countryStore.getCountryById(profile?.country_id) }}</span>
            <span class="split" v-if="profile?.birthday">|</span>
          </template>
          <span v-if="profile?.birthday">{{ profile?.birthday }}</span>
        </div>
        <div class="tags">
          <div v-if="profile?.language && profile?.language.length > 0">
            <div v-for="(item, index) in profile?.language" :key="item">
              <span>{{ item }}</span>
              <span v-if="index !== profile?.language.length - 1">/</span>
            </div>
          </div>
          <div v-if="profile?.education">
            {{ profile?.education }}
          </div>
          <div v-if="profile?.certificate && profile?.certificate.length > 0">
            <div v-for="(item, index) in profile?.certificate" :key="item">
              <span>{{ item }}</span>
              <span v-if="index !== profile?.certificate.length - 1">/</span>
            </div>
          </div>
          <div v-if="profile?.air_model && profile?.air_model.length > 0">
            <div v-for="(item, index) in profile?.air_model" :key="item">
              <span>{{ item }}</span>
              <span v-if="index !== profile?.air_model.length - 1">/</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <FormModalMemberUpdateNickname
    ref="updateNicknameModalRef"
  ></FormModalMemberUpdateNickname>
</template>

<script setup lang="ts">
import { useMemberStore, useCountryStore, useGlobalStore } from "~/store";
import { useRoute } from "vue-router";
import { getCurrentInstance, onMounted, ref } from "vue";
import { postUpdateMemberOne } from "../../../../../api/member";
import type { UpdateMemberOneParams } from "../../../../../types/member";
import { postUploadSingleImg } from "../../../../../api/api";
import { message } from "ant-design-vue";

const $t = getCurrentInstance()?.appContext.config.globalProperties.$t;

const route = useRoute();
const { profile } = useMemberStore();
const countryStore = useCountryStore();
const globalStore = useGlobalStore();

// 判断从其他页面来更新数据
const updateDataFromOtherPage = () => {
  let update = route.query.update;
  if (update) {
    switch (update) {
      case (update = "nickname"):
        updateNicknameModalRef.value.show();
        break;
    }
  }
};
const updateNicknameModalRef = ref();
const onClickEditNickname = () => {
  if (isMobile()) {
    goto("/mobile/updateName");
    return;
  }
  updateNicknameModalRef.value.show();
};

function verifySuffix(fileName: string) {
  let suffix = `(bmp|jpg|png|tif|gif|pcx|tga|exif|fpx|svg|psd|cdr|pcd|dxf|ufo|eps|ai|raw|WMF|webp|jpeg)`;
  var regular = new RegExp(`.*\.${suffix}`);
  return regular.test(fileName);
}
const uploadAvatar = () => {
  let input = document.createElement("input");
  input.type = "file";
  input.accept = "image/*";
  input.click();
  input.onchange = async (e: any) => {
    let file = e.target.files[0];
    let file_type = file.type;
    if (!verifySuffix(file_type))
      return message.warning($t("message.upload_img.error_2"));
    let formData = new FormData();
    formData.append("file", file);
    let res = await postUploadSingleImg(formData);
    if (res.code === 200) {
      let parmas: UpdateMemberOneParams = {
        field: "headimgurl",
        value: res.img!,
      };
      let res2 = await postUpdateMemberOne(parmas);
      if (res2.code === 200) {
        profile!.headimgurl = res.img!;
      }
    }
  };
};

onMounted(() => {
  updateDataFromOtherPage();
});
</script>
<style scoped lang="less">
.divider-line {
  margin: 24px 0;
}

.user-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  .left {
    display: flex;
    gap: 80px;
  }
  .img-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    button {
      display: inline-block;
      background-color: #3d88f2;
      border: none;
      color: #fff;
      font-size: 14px;
      border-radius: 5px;
      padding: 4px 8px;
      cursor: pointer;
    }
  }
  .logo {
    width: 120px;
    height: 120px;
    flex-shrink: 0;
  }
  .details {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: 16px;
    .nickname {
      color: #323232;
      display: flex;
      align-items: center;
      gap: 8px;
      span:last-child {
        cursor: pointer;
        &:hover {
          color: #3d88f2;
        }
      }
    }
    .infos {
      display: flex;
      gap: 16px;
      align-items: center;
      color: #646464;
      .status {
        padding: 5px 8px;
        background: rgba(54, 217, 108, 0.1);
        border-radius: 4px;
        font-size: 16px;
        color: #36d96c;
      }
      .split {
        color: #ccd6de;
      }
    }
    .tags {
      color: #323232;
      display: flex;
      flex-wrap: wrap;
      gap: 16px;
      & > div {
        padding: 5px 8px;
        border-radius: 4px;
        background-color: #f5f5f5;
        display: flex;
        flex-wrap: wrap;
        & > div {
          display: inline-block;
        }
      }
    }
  }
}

@media screen and (max-width: 768px) {
  /* 768px以下的屏幕 */
  .user-info {
    padding-top: 150px;
    padding-bottom: 200px;
    margin-left: -82px;
    margin-right: -82px;
    background-color: #f6f8fa;
    border-bottom: 1px solid #ccd6de;
    .right {
      display: none;
    }
    .left {
      align-items: center;
      flex: 1;
      flex-direction: column;
      gap: 80px;
    }
    .img-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 80px;
      button {
        display: inline-block;
        background-color: #3d88f2;
        border: none;
        color: #fff;
        font-size: 72px;
        border-radius: 20px;
        padding: 20px 40px;
        cursor: pointer;
      }
    }
    .logo {
      width: 300px;
      height: 300px;
      flex-shrink: 0;
    }
    .details {
      gap: 41px;
      .nickname {
        font-size: 82px;
        justify-content: center;
        gap: 100px;
      }
      .infos {
        font-size: 72px;
        gap: 100px;
        .status {
          padding: 20px 41px;
          border-radius: 31px;
          font-size: 61px;
        }
      }
      .tags {
        display: none;
        transform: translateX(-369px);
        gap: 41px;
        font-size: 61px;
        flex-wrap: wrap;
        & > div {
          white-space: nowrap;
          border-radius: 31px 31px 31px 31px;
          padding: 20px 41px;
          & > div {
            display: inline-block;
          }
        }
      }
    }
  }
  .divider-line {
    margin: 123px 0;
  }
}
</style>
